<!Doctype html>
<html>
<head>
<title>首页</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!--fonts-->
<link href='https://fonts.googleapis.com/css?family=Pathway+Gothic+One'
	rel='stylesheet' type='text/css'>
<link
	href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800'
	rel='stylesheet' type='text/css'>
<!--//fonts-->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"
	media="all" />
<!-- for-mobile-apps -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<script type="application/x-javascript">
	 addEventListener("load", function() 
			 { setTimeout(hideURLbar, 0); 
			 }, false); 
	 function hideURLbar(){ window.scrollTo(0,1); 
	 } 
</script>
<!-- //for-mobile-apps -->
<!-- js -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- js -->

</head>
<body>
	<!-- banner -->
	<div class="banner">
		<div class="container">
			<div class="banner-info text-center">
				<a href="index.html"><img src="images/13.png" alt="" /></a>
				<div class="strip"></div>
				<h1>欢迎来到环湖咖啡屋</h1>
				<p>请享受在我们这个小店中的轻松时光</p>
			</div>
		</div>
	</div>
	<!-- //banner -->
	<!-- banner-bottom -->
	<div class="banner-bottom">
		<div class="container">
			<div class="bottom-info">
				<div class="bottom-img">
					<img src="images/12.png" alt="" />
				</div>
				<p>快快加入我们，即可享受免费美味咖啡</p>
				<div class="join">
					<a class="hvr-bounce-to-bottom button" href="#">JOIN</a>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
	</div>
	<!-- //banner-bottom -->
	<!-- menu -->
	<div class="menu">
		<div class="container">
			<div class="menu-info">
				<h3>下面是我们为您提供的菜单</h3>
				<div class="border"></div>
			</div>
			<div class="menu-grids">
				<div class="menu-grid">
					<a href="single2.html">
					<img src="images/1.jpg"  />
						<div class="caption">
							<p>早餐</p>
						</div> </a>
				</div>
				<div class="menu-grid">
					<a href="single2.html"><img
						src="images/2.jpg" alt="" />
						<div class="caption">
							<p>中餐</p>
						</div> </a>
				</div>
				<div class="menu-grid">
					<a href="#small-dialog3"
						class="b-link-stripe b-animate-go  thickbox play-icon popup-with-zoom-anim"><img
						src="images/3.jpg" alt="" />
						<div class="caption">
							<p>晚餐</p>
						</div> </a>
				</div>
				<div class="menu-grid">
					<a href="#small-dialog4"
						class="b-link-stripe b-animate-go  thickbox play-icon popup-with-zoom-anim"><img
						src="images/4.jpg" alt="" />
						<div class="caption">
							<p>早午餐</p>
						</div> </a>
				</div>
				<div class="menu-grid">
					<a href="#small-dialog5"
						class="b-link-stripe b-animate-go  thickbox play-icon popup-with-zoom-anim"><img
						src="images/5.jpg" alt="" />
						<div class="caption">
							<p>甜点</p>
						</div> </a>
				</div>
				<div class="menu-grid">
					<a href="#small-dialog6"
						class="b-link-stripe b-animate-go  thickbox play-icon popup-with-zoom-anim"><img
						src="images/6.jpg" alt="" />
						<div class="caption">
							<p>咖啡</p>
						</div> </a>
				</div>
				<div class="clearfix"></div>
			</div>
			<!-- pop-up-box -->
			<!-- script for pop-up-box -->
			<script type="text/javascript" src="js/modernizr.custom.min.js"></script>
			<link href="css/popuo-box.css" rel="stylesheet" type="text/css" media="all" />
			<script src="js/jquery.magnific-popup.js" type="text/javascript"></script>
			<!-- //script for pop-up-box -->
			<div id="small-dialog1" class="mfp-hide">
				<div class="image-top">
					<img src="images/1.jpg" alt="" />
				</div>
			</div>
			<div id="small-dialog2" class="mfp-hide">
				<div class="image-top">
					<img src="images/2.jpg" alt="" />
				</div>
			</div>
			<div id="small-dialog3" class="mfp-hide">
				<div class="image-top">
					<img src="images/3.jpg" alt="" />
				</div>
			</div>
			<div id="small-dialog4" class="mfp-hide">
				<div class="image-top">
					<img src="images/4.jpg" alt="" />
				</div>
			</div>
			<div id="small-dialog5" class="mfp-hide">
				<div class="image-top">
					<img src="images/5.jpg" alt="" />
				</div>
			</div>
			<div id="small-dialog6" class="mfp-hide">
				<div class="image-top">
					<img src="images/6.jpg" alt="" />
				</div>
			</div>
			<script>
				$ (document).ready (function ()
                {
	                $ ('.popup-with-zoom-anim').magnificPopup (
	                {
	                    type : 'inline',
	                    fixedContentPos : false,
	                    fixedBgPos : true,
	                    overflowY : 'auto',
	                    closeBtnInside : true,
	                    preloader : false,
	                    midClick : true,
	                    removalDelay : 300,
	                    mainClass : 'my-mfp-zoom-in'
	                });
	                
                });
			</script>
			<!-- //pop-up-box -->

		</div>
	</div>
	<!-- //menu -->
	<div class="copyrights">
		Collect from <a href="http://www.cssmoban.com/" title="网站模板">环湖电商小团队</a>
	</div>
	<!-- slider -->
	<div class="slider">
		<div class="container">
			<div class="slider-info">
				<h3>顾客们是这样说的：</h3>
				<div class="border a"></div>
			</div>
			<!-- responsiveslides -->
			<script src="js/responsiveslides.min.js"></script>
			<script>
				// You can also use "$(window).load(function() {"
                $ (function ()
                {
	                // Slideshow 4
	                $ ("#slider3").responsiveSlides (
	                {
	                    auto : true,
	                    pager : false,
	                    nav : false,
	                    speed : 500,
	                    namespace : "callbacks",
	                    before : function ()
	                    {
		                    $ ('.events').append ("<li>before event fired.</li>");
	                    },
	                    after : function ()
	                    {
		                    $ ('.events').append ("<li>after event fired.</li>");
	                    }
	                });
                });
			</script>
			<!-- responsiveslides -->
			<div id="top" class="callbacks_container">
				<ul class="rslides" id="slider3">
					<li>
						<div class="slider-text">
							<h4>“Aenean iaculis, mauris sed aliquet semper, nulla nisl
								mattis elit, a volutpat nibh leo id enim. Aenean urna est,
								tincidunt egestas semper vitae, facilisis eu tellus.”</h4>
							<p>John Smith, San Francisco, CA</p>
						</div>
					</li>
					<li>
						<div class="slider-text">
							<h4>“Tincidunt iaculis, mauris sed aliquet semper, nulla
								nisl mattis elit, a volutpat nibh leo id enim. urna est,
								tincidunt egestas semper vitae, facilisis eu tellus, Aenean.”</h4>
							<p>Thompson, USA, CA</p>
						</div>
					</li>
					<li>
						<div class="slider-text">
							<h4>“Facilisis eu tellus, Aenean iaculis, mauris sed aliquet
								semper, nulla nisl mattis elit, a volutpat nibh leo id enim.
								Aenean urna est, tincidunt egestas semper vitae.”</h4>
							<p>John Doe, Argentina, CA</p>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<!-- //slider -->
	<!-- events -->
	<div class="slider-bottom">
		<div class="container">
			<div class="events-info">
				<h3>餐饮文化事件</h3>
				<div class="border"></div>
				<p>
					美国人的饮食特点： <br />

					早餐以面包、牛奶、鸡蛋、果汁、麦片、咖啡、香肠等为主。午餐一般在工作地点用快餐(快餐是典型的美国饮食文化，十分普及)，一般有三明治、水果、咖啡、汉堡包、热狗等。晚餐是正餐，比较丰盛，有一二道菜，如牛排、猪排、烤肉、炸鸡等，配面包、黄油、青菜、水果、点心等。也有不少人上餐馆用晚餐。
					<br />

					美国餐馆很多，一般供应自助餐、快餐、特餐(固定份饭)、全餐等各种形式的餐饮，价格一般比较低廉，也可点菜，点菜价格最高。早餐一般在8时左右，午餐一般在12时-14时，晚餐一般在18时左右。
					<br /> 他们在临睡前有吃点心的习惯，成人以水果、糖果为主，孩子则食用牛奶和小甜饼。<br />

					三明治和薯条美国人的口味比较清淡，喜欢吃生、冷食品，如凉抖菜、嫩肉排等，热汤也不烫。<br />

					菜肴的味道一般是咸中带点甜。煎、炸、炒、烤为主要烹调方式，不用红烧、蒸等方式。以肉、鱼、蔬菜为主食，面包、面条、米饭是副食。甜食有蛋糕、家常小馅饼、冰淇淋等。他们喜欢吃青豆、菜心、豆苗、刀豆、蘑菇等蔬菜。所用肉类都先剔除骨头，鱼去头尾和骨刺，虾蟹去壳。<br />

					美国人喜欢吃糖醋鱼、咕噜肉、炸牛肉、炸牛排、炸猪排、烤鸡、炸仔鸡等肉食菜品，爱用冰水、矿泉水、可口可乐、啤酒、威士忌、白兰地等饮料，喜欢在饮料中加冰块，不喜欢饮茶。饭前以蕃茄汁、橙汁等作为开胃饮料，吃饭时习惯饮用啤酒、葡萄酒、汽水等饮料，饭后则喝咖啡，很少喝烈性酒。<br />

					美国人不爱吃猪蹄、鸡爪、海参、动物内脏、肥肉等。烹饪时不放调料，调料放在餐桌上自取，有酱油、醋、味精、胡椒粉、辣椒粉等。<br />

					部分美国人喜欢吃蚯蚓、罐头、饼干。制作凉菜时，一般用色拉油、沙司作调料。不少人喜欢吃我国的粤菜、川菜以及甜酱、蚝油、海鲜酱等。喜欢用威士忌、杜松子酒、伏特加等生酒混合调制鸡尾酒。
				</p>
			</div>
			<div class="event-grids">
				<div class="col-md-6 event-grid">
					<h3>
						<a href="single.html">夏日烧烤节</a>
					</h3>
					<h4>Dec 16-22, 2015</h4>
					<p>Aenean iaculis, mauris sed aliquet semper, nulla nisl mattis
						elit Iaculis, mauris sed semper, nulla nisl mattis elit.</p>
					<a href="single.html"><img src="images/9.jpg" alt="" /></a>
				</div>
				<div class="col-md-6 event-grid">
					<h3>
						<a href="single.html">咖啡周</a>
					</h3>
					<h4>Nov 12-19, 2015</h4>
					<p>Aenean iaculis, mauris sed aliquet semper, nulla nisl mattis
						elit Iaculis, mauris sed semper, nulla nisl mattis elit.</p>
					<a href="single.html"><img src="images/10.jpg" alt="" /></a>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
	</div>
	<!-- //events -->
	<!-- footer -->
	<div class="footer">
		<div class="container">
			<div class="footer-header">
				<h3>环湖咖啡屋</h3>
				<div class="border b"></div>
			</div>
			<div class="footer-grids">
				<div class="col-md-3 footer-grid">
					<p>
						MONDAY - THURSDAY<span>7：00-21：00</span>
					</p>
				</div>
				<div class="col-md-3 footer-grid">
					<p>
						FRIDAY - SUNDAY<span>7：00-24：00</span>
					</p>
				</div>
				<div class="col-md-3 footer-grid">
					<p>
						湖北省 武汉市 洪山区<span>南湖大道182号环湖宿舍区</span>
					</p>
				</div>
				<div class="col-md-3 footer-grid">
					<p>
						027-55331155<span><a href="mailto:example@mail.com">cafestore@mail.com</a></span>
					</p>
				</div>
				<div class="clearfix"></div>
			</div>
			<div class="social-icons">
				<ul>
					<li><a class="s" href="#"></a></li>
					<li><a class="twit" href="#"></a></li>
					<li><a class="fb" href="#"></a></li>
				</ul>
			</div>
			<div class="footer-bottom">
				<p>
					Copyright &copy; 2015.Company name All rights reserved.More
					Templates <a href="http://www.cssmoban.com/" target="_blank"
						title="模板">模板之家</a> - Collect from <a
						href="http://www.cssmoban.com/" title="网页" target="_blank">网页</a>
				</p>
			</div>
		</div>
	</div>
	<!-- //footer -->
</body>
</html>